<template>
  <div class="home">
    <el-container>
      <el-aside :width="asideWidth">
        <!-- 放置图片logo和系统名称 -->
        <div class="logo">
          <el-image style="width: 32px; height: 32px" :src="imgurl" />
          <p v-show="!isCollapse">嗨购后台系统</p>
        </div>
        <!-- 侧边栏部分 -->
        <Aside :isCollapse="isCollapse"></Aside>
      </el-aside>
      <el-container>
        <el-header>
          <!-- 右侧头部部分 -->
          <!-- <el-icon><Expand /></el-icon>
          <el-icon><Fold /></el-icon> -->
          <el-icon @click="isCollapse = !isCollapse" :size="20">
            <component :is="showCollapse"></component>
          </el-icon>
          <div class="headerright">
            <p>欢迎您: {{ userinfo.adminname }}</p>
            <el-dropdown>
              <!-- <span class="el-dropdown-link">
                Dropdown List
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon> -->
              <el-avatar :size="30" :src="circleUrl" />
              <!-- </span> -->
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="$router.push('/set')">设置</el-dropdown-item>
                  <el-dropdown-item @click="loginoutFn">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <!-- 放置面包屑导航 -->
          <Breadcrumb></Breadcrumb>
          <!-- 右侧主体部分 二级路由组件还要显示的坑 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// 引入侧边栏组件
import Aside from '@/components/Aside.vue'
// 引入折叠图标组件
import { Expand, Fold } from '@element-plus/icons-vue'
// 导入辅助函数
import { mapState, mapMutations } from 'vuex'
// 导入面包屑导航
import Breadcrumb from '../components/Breadcrumb.vue'
export default {
  name: '',
  data() {
    return {
      isCollapse: false, // 是否折叠左侧菜单栏
      // logo
      imgurl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      //头像
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    }
  },
  computed: {
    // 设置的计算属性. 来控制显示什么图标组件
    showCollapse() {
      return this.isCollapse ? Expand : Fold
    },
    asideWidth() {
      return this.isCollapse ? '64px' : '200px'
    },
    ...mapState(['userinfo'])
  },
  components: {
    Aside,
    Expand, // 注册图标组件 打开
    Fold, // 注册图标组件  折叠
    Breadcrumb
  },
  mounted() {
    // console.log('home组件实例', this)
  },
  methods: {
    ...mapMutations(['setuserinfoFn']),
    loginoutFn() {
      //退出登录
      //01: 将store 仓库中的userinfo 对象清空
      this.setuserinfoFn({})
      //02: 清除本地登录时存的内容
      localStorage.removeItem('vuex')
      //03: 跳转到登录页
      this.$router.push('/login')
    }
  }
}
</script>
<style lang='scss' scoped>
.home {
  width: 100%;
  height: 100%;
  .el-container {
    width: 100%;
    height: 100%;
    .el-aside {
      transition: 0.3s linear;
      border-right: none;
      background-color: #545c64;
      overflow: hidden;
      .logo {
        display: flex;
        font-size: 16px;
        height: 56px;
        padding-left: 20px;
        box-sizing: border-box;
        align-items: center;
        width: 100%;
        .el-image {
          margin-right: 10px;
        }
        p {
          transition: 0.3s;
          color: white;
        }
      }
    }
    .el-sub-menu__title {
      color: white !important;
    }
  }
}

.el-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: lightblue;
  .headerright {
    display: flex;
    align-items: center;
    .example-showcase .el-dropdown-link {
      cursor: pointer;
      color: var(--el-color-primary);
      display: flex;
      align-items: center;
    }
  }
}
</style>